body{ padding:0;margin:0;}

@header-height:60px;
@banner-height:560px;
@courses-height:200px;
@footer-height:686px;

@header-bottom-bgcolor:#000;

.header{
	height:@header-height;
	background:@header-bottom-bgcolor;
}
.banner{
	height:@banner-height;
}
.courses{
	height:@courses-height;
}
.footer{
	height:@header-height;
	background:@header-bottom-bgcolor;
}


.fl{
	float: left;
}
.fr(){
	float: right;
}
.nav-block-margin(){
	height: 36px;
	margin: 12px 25px;
}
.border-radius(@radius: 50%){
	-webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
.logo{
	.fl();
	width: 128px;
	background: #f01400;
	.nav-block-margin();
}
.nav{
	.fl();
	height: 60px;
}

@font-medium:14px;
@font-small:12px;
@color-link:#fbfbfb;
@color-dark: #5c646b;
@bgcolor-dard:#2b333b;
@bg-link-hover:#363c41;
.bg-hover(){
	background-color: @bg-link-hover;
}
.nav__item{
	display: block;
	float: left;
	line-height: 60px;
	padding: 0 25px;
	text-decoration: none;
	color: @color-link;
	font-size: @font-medium;
}
.nav__item:hover{
	.bg-hover()
}
.nav__item_icon_new{
	.bg-hover()
}
.search{
	padding-right: 25px;
	position: relative;
	.fr();
	.nav-block-margin();
}
.search::before{
	content: '前端入门';
	display: block;
	position: absolute;
	width: 72px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	color: @color-dark;
	font-size: @font-small;
	background-color:@bgcolor-dard;
}
.search__input{
	width: 242px;
	border:none;
	background-color: #000;
	height: 36px;
	outline: none;
	color: #fff;
	border-bottom: 1px solid #ccc;
}
.profile{
	.fr();
}
.profile__item{
	display: block;
	float: left;
	width: 60px;
	height: 60px;
	background-color: #ccc;
	margin-left: 1px;
}
.profile__item:hover{
	.bg-hover()
}
.profile__ava{
	width: 36px;
	height: 36px;
	margin: 12px;
	.border-radius(50px);
}
